<template>
    <div class="mj-version">
        <editor-title title="版本选择" tips="指定midjourney的渲染版本" />
        <el-select
            v-if="config"
            v-model="currentVersion"
            placeholder="请选择版本"
            class="w-full mt-[8px]"
            size="large"
        >
            <el-option
                v-for="(val, key) in config[formData.model]?.version"
                :key="key"
                :label="val"
                :value="key"
            />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import { config, formData } from '../../hooks/useDrawEffect'
import editorTitle from '../common/editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 模型版本
    modelValue: {
        type: String,
        default: ''
    }
})

const { modelValue: currentVersion } = useVModels(props, emits)

watch(
    () => formData.value.model,
    () => {
        formData.value.model
        if (!config.value[formData.value.model] || !config.value[formData.value.model]?.version) {
            return
        }

        const versions = config.value[formData.value.model].version
        const keys = Object.keys(versions)
        currentVersion.value = keys[0]
    }, { immediate: true }
)
</script>
